<template>
    <view class="main">
        <Empty v-if="!loadShow && !noteiceListData.length" text="暂无公告" />
        <view class="item" v-for="item in noteiceListData" :key="item.id"
            @click="navTo(`/subPackage/webView/webView?url=${item.links}`)">
            <view class="top">{{ item.title }}</view>
            <view class="bottom dispaly-just-between">
                <view class="left">{{ item.intro }}</view>
                <view class="right">{{ item.create_time }}</view>
            </view>
        </view>
        <LoadMore :status="status" :show="loadShow" />
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util'
import { reactive, ref, onMounted } from 'vue'
import { getNotice } from '@/api/home/home'
import type { NoticeType } from '@/types/responseData'
import type { RequestParmType } from '@/types/requstParm'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

let queryData = reactive<RequestParmType>({
    page: 1,
    limit: 10,
})

const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let noteiceListData = ref<Array<NoticeType>>([])
const getListData = async () => {
    status.value = 'loading'
    const res = await getNotice(queryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            status.value = 'loadmore'
            loadShow.value = true
            noteiceListData.value = [...noteiceListData.value, ...res.data.list]
        } else {
            loadShow.value = true
            status.value = 'nomore'
        }
    }
}

const init = () => {
    noteiceListData.value = []
    queryData.page = 1
}

onReachBottom(() => {
    (queryData.page as number)++
    getListData()
})

onPullDownRefresh(async () => {
    uni.showLoading()
    init()
    await getListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

onMounted(() => {
    getListData()
})

</script>
<style lang="scss" scoped>
.main {
    padding: 30rpx;

    .item:last-child {
        margin-bottom: 0;
    }

    .item {
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;

        .top {
            font-family: PingFang SC, PingFang SC;
            font-weight: 800;
            font-size: 28rpx;
            color: #000000;
            margin-bottom: 23rpx;
        }

        .bottom {

            .left,
            .right {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #7E7E7E;
            }
        }
    }
}
</style>